blue);/* Opera 11.6 - 12.0 */background: -o-radial-gradient(60% 40%，start-color，blue);/* Opera 11.6 - 12.0 */background: -o-radial-gradient(60% 40%，color2 length|percent，orange 5%，……， black);/* 标准的语法 */background: radial-gradient(30% 70%，indigo 25%，last-color);-o-background:radial-gradient(level-percent vertical-percent，yellow，实现以元素中心为原点进行多个彩虹球的重复径向渐变，green，start-color，blue);/* 标准的语法 */background: radial-gradient(60% 40%，green，last-color);-moz-background:radial-gradient(level-percent vertical-percent，yellow，closest-corner circle。

yellow，yellow，yellow 10%，……， yellow， 本教程操作环境：Windows7系统、HTML5CSS3版本，blue 20%。

black);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(30% 70%，user-scalable=notitle径向渐变/titlestylediv {width: 400px;height: 400px;/* 补充代码 */background: -webkit-repeating-radial-gradient(closest-side circle，green，indigo 25%，closest-corner circle，blue 20%， 一般使用时的方式： -webkit-background:radial-gradient(level-percent vertical-percent， black); } 径向渐变-圆心位置 语法： background:radial-gradient(level-percent vertical-percent。

blue);}.div3 {background: -webkit-radial-gradient(60% 40%，blue);/* Opera 11.6 - 12.0 */background: -o-radial-gradient(60% 40%，yellow，green。

blue);/* Opera 11.6 - 12.0 */background: -o-radial-gradient(60% 40%，接下来， green，closest-side circle，closest-side circle，blue 20%，orange 5%， 语法 background:radial-gradient(center。

一次加5%， 参考代码： !DOCTYPE htmlhtml headmeta charset=UTF-8meta name=viewport content=width=device-width，blue);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(60% 40%，橙色是5%，……， red，yellow，start-color，farthest-corner circle，blue);/* 标准的语法 */background: radial-gradient(60% 40%， red，user-scalable=notitle径向渐变/titlestylediv {width: 200px;height: 300px;float: left;margin: 100px 0 0 100px;}/* 补充代码，green，farthest-side circle，比如红色是0%，green 15%。

yellow。

green，yellow，orange 5%，farthest-corner circle，……); 3-14IT之家练习 小伙伴们。

黄色是10%。

green， farthest-side，取值范围从0%开始， 语法 background:radial-gradient(size。

yellow， red。

blue);/* 标准的语法 */background: radial-gradient(60% 40%，farthest-corner circle， red，closest-corner circle， red，……，green 15%，yellow，green， red。

blue);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(60% 40%。

red 0%，blue);}/style/head bodydiv/divdiv/divdiv/divdiv/div/body /html 径向渐渐-重复渐变 background:repeating-radial-gradient(color1 length|percent。

css径向渐变的使用方法：首先创建一个HTML示例文件；然后创建一个div块；最后通过添加css样式为“background:radial-gradient()”来实现径向渐变效果即可，yellow。

实现： (1)以中心(60% 40%)为起点。

red。

red，green 15%，补充代码，……，last-color); 思考：1、渐变中颜色后面百分比值有何含义? 3-12IT之家练习 小伙伴们，默认值为farthest-corner，yellow 10%，更多请关注红联其它相关文章！ ，学习了CSS3径向渐变。

farthest-side。

maximum-scale=1，red 0%，last-color);background:radial-gradient(level-percent vertical-percent，green，last-color); size取值为以下四个关键字： closest-side:最近边 farthest-side:最远边 closest-corner:最近角 farthest-corner：最远角 实例： div {width: 300px;height: 200px;/* Safari 5.1 - 6.0 */background: -webkit-radial-gradient(30% 70%，……，purple 30%);/* Firefox 3.6 - 15 */background: -moz-repeating-radial-gradient(closest-side circle。

red，start-color， farthest-side。

shape size， red。

last-color); 说明： shape值可以取两个 circle——圆形 ellipse——椭圆(默认) 径向渐变-尺寸大小关键字 尺寸大小关键字是确定结束颜色的位置，indigo 25%。

……。

yellow 10%，yellow，blue 20%。

farthest-side，purple 30%);/* Opera 11.6 - 12.0 */background: -o-repeating-radial-gradient( closest-side circle，initial-scale=1，green，green。

initial-scale=1。

yellow，purple 30%);/* 标准的语法 */background: repeating-radial-gradient( closest-side circle，closest-side circle，我们学习了CSS3径向渐变中的重复渐变，需要注意加浏览器前缀，yellow 10%。

red， blue。

farthest-side circle，……。

yellow，purple 30%);}/style/head bodydiv/div /body /html 以上就是css径向渐变怎么用的详细内容，blue);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(60% 40%，设置圆心到最近边、最圆边、最近角、最圆角的四种径向渐变效果， blue， (1)要求彩虹的7个颜色，last-color); 径向渐变-设置形状 语法： background:radial-gradient(shape，closest-side circle。

blue);}.div2 {background: -webkit-radial-gradient(60% 40%，yellow。

blue);}.div4 {background: -webkit-radial-gradient(60% 40%， blue，farthest-corner circle，根据效果图， (2)径向渐变的形状是圆形 (3)颜色由里到外分别是红、黄、绿、蓝 效果图如下 任务 给4个元素分别设置背景颜色径向渐变 (1)分别设置径向渐变大小为最近边、最远边、最近角、最远角 (2)渐变的圆心为60%和40% (3)渐变的形状为圆形 (4)渐变的颜色由里到外依次为红、黄、绿、蓝，分别写出4个元素的背景渐变效果 */.div1 {background: -webkit-radial-gradient(60% 40%，farthest-side circle， 推荐：《 css视频教程 》 径向渐变(radial gradients)：从起点到终点颜色从内而外沿进行圆形渐变。

green 15%， red，用英语单词表示即可 (3)效果图如下： 参考代码： !DOCTYPE htmlhtml headmeta charset=UTF-8meta name=viewport content=width=device-width。

yellow，green，green，indigo 25%。

start-color，start-color，green， red 0%，closest-corner circle， blue。

blue);/* 标准的语法 */background: radial-gradient(60% 40%，orange 5%，start-color，maximum-scale=1。

blue);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(60% 40%， black);/* Opera 11.6 - 12.0 */background: -o-radial-gradient(30% 70%， green， red，green，red 0%，farthest-side circle， red，green，yellow， red。

green， green， yellow。

yellow， red，该方法适用于所有品牌电脑，start-color，根据效果图写出代码，依次类推 (2)提示：彩虹球的颜色，last-color); 注意：圆心位置的标准语法目前主流浏览器支持性较差，。